<template>
        <div class="settlesearch">
                <el-form ref="ruleForm" :inline="true" :model="params" class="demo-form-inline">
                        <el-form-item label="支付清单编号：">
                            <el-input v-model.trim="params.code" placeholder="请输入支付清单编号"></el-input>
                        </el-form-item>
                        <el-form-item label="H3审批状态：">
                            <el-select v-model="params.verifyStatus">
                                <el-option v-for="item in verifyStatuss" :label="item.label" :key="item.value" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="申请含税金额（元）：">
                            <el-input v-model.trim="params.amount" placeholder="请输入申请含税金额"></el-input>
                        </el-form-item>
                        <el-form-item label="类别：">
                                <el-select v-model="params.type">
                                        <el-option v-for="item in Types" :label="item.label" :key="item.value" :value="item.value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="提交时间：">
                            <el-date-picker
                                    v-model="time"
                                    type="datetimerange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    >
                            </el-date-picker>
                        </el-form-item>
                        <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                        <el-button type="primary" @click="resetForm">重置</el-button>
                </el-form>
                <el-table :data="tableData" border stripe >
                        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                        <el-table-column  label="支付清单编号" prop="code" align="center"></el-table-column>
                        <el-table-column  label="H3审批状态" prop="verifyStatus" align="center" :formatter="initVerifyStatus"></el-table-column>
                        <el-table-column  label="申请含税金额（元）" prop="amount" align="center" :formatter="initMoney"></el-table-column>
                        <el-table-column  label="实际支付金额（元）" prop="payAmount" align="center" :formatter="initMoney"></el-table-column>
                        <el-table-column  label="订单数" prop="num" align="center"></el-table-column>
                        <el-table-column  label="类别" prop="payType" align="center" :formatter="initPayType"></el-table-column>
                        <el-table-column  label="状态" prop="verifyStatus" align="center" :formatter="initType"></el-table-column>
                        <el-table-column  label="申请人" prop="userName" align="center"></el-table-column>
                        <el-table-column  label="提交时间" prop="createTime" align="center" :formatter="initTime"></el-table-column>
                        <el-table-column  label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="jumpList(scope.row.code)">查看</el-button>
                            </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="params.pageNum"
                        :page-sizes="[10,30,50,100]"
                        :page-size="params.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total" style="margin-top:30px;">
                 </el-pagination>
        </div>
</template>

<script>
import utils from "../../../../common/utils"
import api from '@/api/apiPath'
export default {
        name: 'settlesearch',
        title: '支付清单查询',
        data(){
                return {
                        verifyStatuss:[
                                {label:"全部",value:0},{label:"审批中",value:2},{label:"审批完成",value:3},{label:"审批失败",value:4}
                        ],
                        Types:[
                                {label:"全部",value:0},{label:"支付佣金",value:1},{label:"电商费退款",value:2},{label:"跟投分红",value:3},
                                {label:"开发商返还款",value:4},{label:"经纪人奖励",value:5},{label:"支付团奖",value:6}
                        ],
                        tableData:[],
                        totallist:{},
                        time:"",
                        params:{
                            code:"",//支付清单编号
                            verifyStatus:0,//H3审批状态
                            amount:"",//申请含税金额
                            type:0,
                            startTime:"",
                            endTime:"",
                            pageSize:10,
                            pageNum:1
                        },
                        total:0
                }
        },
        watch:{
            time(val){
                if(val){
                    if((new Date(this.time[1]).getTime())-(new Date(this.time[0]).getTime())<0){
                        this.$message({
                            showClose: true,
                            message: '开始日期要早于结束日期',
                            type: 'warning'
                        });
                    }else{
                        this.params.startTime=new Date(this.time[0]).getTime();
                        this.params.endTime=new Date(this.time[1]).getTime();
                    }
                }else{
                    this.params.startTime=""
                    this.params.endTime=""
                }
            }
        },
        methods:{
            getTimeString (timestamp) {
                  if (timestamp) {
                    const time = new Date(timestamp)
                    let dateStr = ''
                    const year = time.getFullYear()
                    const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                    const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                    dateStr = year + '-' + month + '-' + day
                    let timeStr = ''
                    const hours = time.getHours()
                    const hh = String(hours).length === 1 ? '0' + hours : hours
                    const minutes = time.getMinutes()
                    const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                    const seconds = time.getSeconds()
                    const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                    timeStr = `${hh}:${mm}:${ss}`
                    // timeStr = `${hh}:${mm}`
                    return dateStr + ' ' + timeStr
                    // return dateStr
                  } else {
                    return ''
                  }
            },
            initTime(row, column, cellValue, index){
                return this.getTimeString(cellValue);
            },
            initVerifyStatus(row, column, cellValue, index){
                if(cellValue==2){return "审批中"}
                if(cellValue==3){return "审批完成"}
                if(cellValue==4){return "审批失败"}
            },
            initPayType(row, column, cellValue, index){
                if(cellValue==1){return "支付佣金"}
                if(cellValue==2){return "电商费退款"}
                if(cellValue==3){return "跟投分红"}
                if(cellValue==4){return "开发商返还款"}
                if(cellValue==5){return "经纪人奖励"}
                if(cellValue==6){return "支付团奖"}
            },
            initType(row, column, cellValue, index){
                if(cellValue==2){return "冻结"}
                if(cellValue==3){return "有效"}
                if(cellValue==4){return "失效"}
            },
            loadData(){
                this.$axios.post("/kingdee/payList/payInventoryList",this.params).then((res)=>{
                    this.tableData=res.list;
                    this.total=res.total;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            toFixedFn(cellValue){//保留两位小数并且千分位展示
                if(cellValue !=undefined && cellValue.toString()!="" && cellValue !=null){
                    let tempValue=parseFloat(cellValue)
                    return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
                }
            },
            initMoney(row, column, cellValue, index){
                    return this.toFixedFn(cellValue);
            },
            handleSizeChange(val){
                this.params.pageSize=val;
                this.loadData();
            },
            handleCurrentChange(val){
                this.params.pageNum=val;
                this.loadData();
            },
            query(){
                this.loadData();
            },
            resetForm(){
                this.params.code="";
                this.params.verifyStatus=0;
                this.params.amount="";
                this.params.type=0;
                this.params.startTime="";
                this.params.endTime="";
                this.time="";
                this.params.pageNum=1;
                this.loadData();
            },
            jumpList(code){
                this.$router.push({
                    path: "/payordercheck",
                    query: {
                        code:code,
                        type:"look",
                        source:"search"
                    }
                })
            }
        },
        mounted(){
            if(this.$route.query.payOrder){
                this.params.code=this.$route.query.payOrder;
            }
            this.loadData();
        }
}
</script>

<style lang="stylus">

</style>
